<template>
  <h2>当前求和为：{{ sum }}</h2>
  <button @click="sum++">点我＋1</button>
  <hr />
  <h2>当前的信息为:{{ msg }}</h2>
  <button @click="msg += '!'">修改信息</button>
  <br />
  <h2>个人信息</h2>
  <h2>姓名:{{ person.name }}</h2>
  <h2>年龄:{{ person.age }}</h2>
  <h2>薪资:{{ person.job.j1.salary }}</h2>
  <button @click="person.name += '~'">修改姓名</button>
  <button @click="person.age++">修改年龄</button>
  <button @click="person.job.j1.salary++">涨薪</button>
</template>

<script>
import { ref, reactive, computed, watch } from 'vue'
export default {
  name: 'Demo',
  watch: {
    // 简写
    //#region
    // sum(newValue, oldValue) {
    //   console.log(
    //     `sum的值变化了,变化前的值是${oldValue},变化后的值是${newValue}`
    //   )
    // }
    // #endregion
    // 完整写法
    //#region
    // sum: {
    //   immediate: true, //是否立即监听
    //   deep: true, //是否开启深度监听
    //   handler(newValue, oldValue) {
    //     console.log(
    //       `sum的值变化了,变化前的值是${oldValue},变化后的值是${newValue}`
    //     )
    //   }
    // }
    //#endregion
  },
  setup(props, context) {
    let sum = ref(0)
    let msg = ref('你好啊')
    let person = reactive({
      name: '张三',
      age: 18,
      job: {
        j1: {
          salary: 50
        }
      }
    })
    //情况一： 监视ref所定义的一个响应式数据
    //#region
    // watch(
    //   sum,
    //   (newValue, oldValue) => {
    //     console.log(
    //       `sum的值变化了,变化前的值是${oldValue},变化后的值是${newValue}`
    //     )
    //   },
    //   { immediate: true }
    // )
    //#endregion

    //情况二： 监视ref所定义的多个响应式数据
    //#region
    // watch(
    //   [sum, msg],
    //   (newValue, oldValue) => {
    //     console.log(`sum或者msg变化了,变化后的值是`, oldValue, newValue)
    //   },
    //   { immediate: true }
    // )
    //#endregion

    /**
     * 情况三：
     *  监视reactive所定义的一个响应式数据的全部属性
     *  1.注意：此处无法正确的获取oldValue
     *  2.注意：强制开启了深度监听模式（deep配置无效）
     */
    //#region
    // watch(
    //   person,
    //   (newValue, oldValue) => {
    //     console.log('person变化了', newValue, oldValue)
    //   },
    //   { deep: false }  此处的配置无效
    // )
    //#endregion

    //情况四： 监视reactive所定义的一个响应式数据中的某个属性
    //#region
    // watch(
    //   () => person.age,
    //   (newValue, oldValue) => {
    //     console.log('person的age变化了', newValue, oldValue)
    //   }
    // )
    //#endregion

    //情况五： 监视reactive所定义的一个响应式数据中的某些属性
    //#region
    // watch([() => person.age, () => person.name], (newValue, oldValue) => {
    //   console.log(`person的age或者name变化了,变化后的值是`, oldValue, newValue)
    // })
    //#endregion

    //特殊情况
    //#region
    // watch(
    //   () => person.job,
    //   (newValue, oldValue) => {
    //     console.log('person的job变化了', newValue, oldValue)
    //   },
    //   { deep: true } //此处由于监视的是reactive所定义的对象中的某个属性，所以deep配置有效
    // )
    //#endregion

    // 返回一个对象(常用)
    return {
      sum,
      msg,
      person
    }
  }
}
</script>
